<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：5、条件渲染  v-if  使用key控制元素的可重用</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 现在有一个应用场景，登录有用户名登录和邮箱登录，
		这是我们平时经常遇到的，页面元素其实是差不多的，可以用包装元素和v-if来控制切换
	-->	
	<div id="app">
		<template v-if="loginType === 'username'">
			<label>Username:</label>
			<input placeholder="Enter your username">
		</template>
		<template v-else>
			<label>Email:</label>
			<input placeholder="Enter your address">
		</template><br/><br/>
		<button @click="toggle">Toggle login type</button><br/><br/>		

	<!-- 从DOM上看，两个input标签好像是不同的元素，但实际上尝试在username的input输入用户名，
		然后切换按钮，发现输入的东西 "跳到" 了email的input里，这是为何？

		原来Vue会尝试尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，这里的input被复用了

		但是问题又来了，如果有些开发需求不想复用怎么办？很简单，往不想复用的元素添加一个属性key，并且
		取一个唯一属性值，它就不会被复用了

		PS.这里label仍然会被复用
	 -->
	 	<template v-if="loginType2 === 'username'">
			<label>Username:</label>
			<input placeholder="Enter your username" key="u-input">
		</template>
		<template v-else>
			<label>Email:</label>
			<input placeholder="Enter your address" key="e-input">
		</template><br/><br/>
		<button @click="toggle2">Toggle login type</button>	
	</div>


	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				loginType: 'username',
				loginType2: 'username'
			},
			methods: {
				toggle: function(){
					if(this.loginType === 'username'){
						this.loginType = 'email'
					}else{
						this.loginType = 'username'
					}
				},
				toggle2: function(){
					if(this.loginType2 === 'username'){
						this.loginType2 = 'email'
					}else{
						this.loginType2 = 'username'
					}
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->
